<template>
  <div class="echartsBox">
    <div v-if="data.length > 0" id="warningCharts" class="allWidthHeight" />
    <div v-else class="kong">暂无数据</div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
export default {
  props: {},
  data() {
    return {
      myChart: null,
      value1: '',
      data: []
    }
  },
  watch: {},
  mounted() {},
  methods: {
    infoSize() {
      this.myChart.resize()
    },
    async getWarningChart() {
      const res = await this.$axios.get(
        '/board/equip/abnormal/realDataWarningChart'
      )
      if (res?.data.code === 200) {
        this.data = res.data.data
        setTimeout(async () => {
          this.setWarningChartLine(res.data.data)
        }, 500)
      }
    },
    generateRandomColor() {
      const letters = '0123456789ABCDEF'
      let color = '#'
      for (let i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)]
      }
      return color
    },
    /* echarts */
    setWarningChartLine(data) {
      if (data.length > 0) {
        let seriesData = []
        let name = []
        let time = data[0].details.map((x) => {
          return x.warningTime
        })
        for (let i = 0; i < data.length; i++) {
          let color = this.generateRandomColor()
          name.push(data[i].equipName + data[i].type)
          let shuzu = {
            name: data[i].equipName + data[i].type,
            type: 'line',
            data: data[i].details.map((x) => {
              return x.value
            }),
            label: {
              show: true, // 显示数值
              position: 'top', // 在顶部显示
              color: '#fff',
              formatter: function (params) {
                // 自定义标签的显示内容
                return params.value // 显示数值
              }
            },
            itemStyle: {
              borderColor: 'rgba(0,0,0,0)', // 去掉标记点的边框
              borderWidth: 0 // 去掉标记点的边框
            },
            lineStyle: {
              color: color, //
              width: 2 // 线条宽度
            },
            symbol: 'none' // 设置为 'none' 去掉线上的点
          }
          seriesData.push(shuzu)
        }
        const option = {
          grid: {
            left: '10%', // 距离左侧的距离
            right: '2%', // 距离右侧的距离
            top: '18%', // 距离顶部的距离
            bottom: '18%' // 距离底部的距离
          },
          tooltip: {
            trigger: 'axis'
          },
          xAxis: [
            {
              splitLine: { show: false },
              axisPointer: {
                type: 'shadow'
              },
              axisLine: {
                // 坐标轴 轴线
                lineStyle: {
                  color: '#fff',
                  width: 1,
                  type: 'solid'
                }
              },
              axisLabel: {
                color: '#fff',
                formatter: '{value}',
                // interval: 0, // 代表显示所有x轴标签显示
                fontSize: 10
              },
              axisTick: {
                show: true
              },
              type: 'category',
              data: time
            }
          ],
          yAxis: [
            {
              splitLine: { show: false },
              axisLine: {
                show: true,
                // 坐标轴 轴线
                lineStyle: {
                  color: '#fff',
                  width: 1,
                  type: 'solid'
                }
              },
              axisLabel: {
                color: '#fff'
              },
              axisTick: {
                show: true
              },
              type: 'value'
            }
          ],
          dataZoom: [
            {
              type: 'inside'
            }
          ],
          series: seriesData
        }
        option.legend = {
          data: option.series.map(function (s) {
            return s.name
          }),
          // formatter: function (name) {
          //   if (name.length > 10) {
          //     // 假设超过5个字符时显示点点
          //     return name.substring(0, 10) + '...'
          //   } else {
          //     return name
          //   }
          // },
          symbol: 'diamond',
          // orient: 'vertical',
          itemWidth: 10, // 设置图例标记的图形宽度
          itemHeight: 3, // 设置图例标记的图形高度
          right: 0,
          top: 0,
          textStyle: {
            fontSize: '12px',
            color: '#fff'
            // color: option.series.reduce(function (colors, series) {
            //   console.log(series.lineStyle.color)
            //   colors[series.name] = series.lineStyle.color
            //   console.log(colors)
            //   return colors
            // }, {})
            // rich: {
            //   a: {
            //     color: '#fff'
            //   }
            // }
          }
        }
        if (
          this.myChart != null &&
          this.myChart !== '' &&
          this.myChart !== undefined
        ) {
          this.myChart.dispose() // 销毁
        }
        this.myChart = echarts.init(document.getElementById('warningCharts'))
        this.myChart.clear()
        this.myChart.setOption(option, true)
      }
    }
  }
}
</script>
<style lang='scss' scoped>
.echartsBox {
  width: 100%;
  // padding: 0 15px;
  height: 100%;
}
.kong {
  background-size: 50% auto;
}
</style>
